<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <input type="text" v-model="name"/>
    <input type="text" v-model="msg"/>
    <input type="text" v-model="counter"/>

    <!-- 使用组件 -->
    <login :name="name" :msg="msg" :count="counter"></login>


</div>
</body>
</html>

<script src="../js/v2.6.10/vue.js"></script>
<script>

    const login = {
        template:`<div><h2>登录局部组件</h2>{{name}}<h3>{{msg}}</h3><button @click="clic">点击改变count{{aaacount}}</button></div>`,
        data() {//用来给当前组件
            return {
                // title:'我是子组件的内部标题'
                loginTitle:this.title,
                aaacount: this.count
            }
        },
        props:['name','msg','count'],//用来接收父组件给当前组件传递数据
        methods:{
            clic(){
                // this.count++;//子组件不能改变父级组件数据
                this.aaacount++;
            }
        }
    }

    const app = new Vue({
        el: "#app",
        data:{
            msg:'组件之前传递动态数据',
            name:'zhangsanlisi',
            counter: 0 ,//'父级单向传递给子级'

        },
        components:{
            //注册局部组件
            login
        }
    });

</script>